<template>
    <el-form :model="formData" label-width="160px">
        <el-form-item label="顶 部 （ m ）">
            <el-input-number v-model="formData.top" class="mx-4" :min="0" controls-position="right" />
        </el-form-item>
        <el-form-item label="底 部（ m ）">
            <el-input-number v-model="formData.bottom" class="mx-4" :min="0" controls-position="right" />
        </el-form-item>
        <el-form-item label="流 体（ fluid ）">
            <el-input :controls="false" :disabled="true" v-model="formData.fluidType" class="mx-4" :min="0" controls-position="right"
                style="width: 150px;" />
            <div style="margin-left: 4px;">
                <el-button style="margin-right: -10px;">选择</el-button>
                <el-button>编辑</el-button>
            </div>
        </el-form-item>
        <el-form-item label="压 力（ psi ）">
            <el-select v-model="formData.pressure" placeholder="pressure">
                <el-option v-for="item in outerDiameterData" :value="item.value" :label="item.label" />
            </el-select>
        </el-form-item>
        <el-form-item label="穿孔顶部深度 （ m ）">
            <el-input-number v-model="formData.perforationTop" class="mx-4" :min="0" controls-position="right" />
        </el-form-item>
        <el-form-item label="穿孔底部深度 （ m ）">
            <el-input-number v-model="formData.perforationBottom" class="mx-4" :min="0" controls-position="right" />
        </el-form-item>
    </el-form>

    <el-form :model="advancedFormData" label-width="160px" >
        <el-form-item>
            <el-button @click="toggleForm">{{ showForm ? '基础' : '更多' }}</el-button>
        </el-form-item>
        <el-form-item  v-if="showForm" label="储层模型">
            <el-select v-model="type" placeholder="Reservoir model">
                <el-option v-for="item in modelType" :value="item.value" :label="item.label" />
            </el-select>
        </el-form-item>
    </el-form>

    <el-form  v-if="type == 'darcyOil'" :model="advancedFormData" label-width="160px" > 
        <el-form-item label="渗透率 ( md ) ">
            <el-input v-model="advancedFormData.permeability" class="mx-4" :min="0" controls-position="right" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="井筒半径 ( in ) ">
            <el-input v-model="advancedFormData.WellboreRadius" class="mx-4" :min="0" controls-position="right" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="排水半径 ( ft ) ">
            <el-input v-model="advancedFormData.drainageRadius" class="mx-4" :min="0" controls-position="right" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="总表面系数">
            <el-input v-model="advancedFormData.totalSkinFactor" class="mx-4" :min="0" controls-position="right" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="泡点压力 ( psi ) ">
            <el-input v-model="advancedFormData.bubblePointPressure" class="mx-4" :min="0" controls-position="right" style="width: 200px;" />
        </el-form-item>
    </el-form>
    <el-form  v-if="type == 'vogelStanding'" :model="advancedFormData" label-width="160px">
        <el-form-item label="生产指数 ( BPD/psi ) ">
            <el-input v-model="advancedFormData.productIndex" class="mx-4" :min="0" controls-position="right" style="width: 200px;" />
        </el-form-item>
    </el-form>
    <el-form   v-if="type == 'userSpecifiedFlowRate'" :model="advancedFormData" label-width="160px">
        <el-form-item label="日液体流量 ( BPD ) ">
            <el-input v-model="advancedFormData.dailyLiquidFlowRate" class="mx-4" :min="0" controls-position="right" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="日气体流量 ( MscfD ) ">
            <el-input v-model="advancedFormData.dailyGasFlowRate" class="mx-4" :min="0" controls-position="right" style="width: 200px;" />
        </el-form-item>
    </el-form>
</template>

<script  setup>
import * as d3 from "d3";
import { drawLine, drawCurve } from "@/api/line.ts";
import { reactive } from 'vue'
import d3DrawStore from '@/store/modules/d3Draw'
const d3Store = d3DrawStore()
const formData = reactive({
    top: null,
    bottom: null,
    perforationTop: 19.88,
    perforationBottom: 30.88,
    pressure: 48.28,
    fluidType:"freshWater",
})
const advancedFormData = reactive({
    permeability: 10.0,
    WellboreRadius: 10,
    drainageRadius: 48.28,
    totalSkinFactor: 0,
    bubblePointPressure: 0,
    productIndex: 10.001,
    dailyLiquidFlowRate: 0,
    dailyGasFlowRate: 0,
})
const type = ref(null)
const modelType = reactive([
  { value: "darcyOil", label: "达西油藏模型" },
  { value: "userSpecifiedFlowRate", label: "用户指定流量" },
  { value: "vogelStanding", label: "沃格尔产能公式" },
]);

const lineLeft = ref(null)
const showForm = ref(false)
const outerDiameterData = reactive([{ value: 48.26, label: "48.26" }, { value: 60.32, label: "60.32" }, { value: 73.02, label: "73.02" }, { value: 88.90, label: "88.90" }, { value: 101.60, label: "101.60" }, { value: 114.30, label: "114.30" }])
const innerDiameter = reactive([{ value: 26.67, label: "26.67" }, { value: 33.40, label: "33.40" }, { value: 42.16, label: "42.16" }, { value: 48.26, label: "48.26" }, { value: 60.32, label: "60.32" }, { value: 73.02, label: "73.02" }])
watch(formData, (newVal, oldVal) => {
    if (newVal.top == null) {
        drawCasings(newVal.top, newVal.bottom)
    }

});

function toggleForm() {
      showForm.value = !showForm.value
      if(showForm.value == true){
        type.value = "darcyOil"
      }else{
        type.value = null
      }
      
    }

// function initCasings() {
//     let setoff = d3Store.centerLine / 6
//     let $ = d3Store.$
//     // let lineB = drawLine($, { x: d3Store.centerLine + setoff, y: 100 }, { x: d3Store.centerLine + setoff, y: 600 })
//     $.append("lineA")
//         .attr("x1", d3Store.centerLine - setoff)
//         .attr("y1", line1.y1)
//         .attr("x2", line1.x2)
//         .attr("y2", line1.y2)
//         .attr("stroke", "red")
//         .attr("stroke-width", 2);
// }
// function drawCasings(top, bottom) {
//     let setoff = d3Store.centerLine / 6
//     let $ = d3Store.$
//     lineLeft.value = drawLine($, { x: d3Store.centerLine - setoff, y: 100 }, { x: d3Store.centerLine - setoff, y: 600 })
// }
</script>